<template>
	<view class="relative" style="min-height: 100vh; ">
		<view class="absolute" style="top: 30rpx; right: 30rpx; width: 45rpx; height: 45rpx;">
			<image v-if="userInfo.phone" class="w-full h-full" src="/static/setting.png" @tap="navigateTo('/pages/user/info')"></image>
		</view>
		<view class="mx-6 w-full flex flex-row align-items-center" style="padding-top: 100rpx; padding-bottom: 100rpx; padding-left: 60rpx;">
			<view class="border-3" style="width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden; border-color: #FF9701;">
				<image v-if="userInfo.phone" class="w-full h-full" mode="aspectFill" :src="userInfo.avatar ? userInfo.avatar : '/static/logo.png'" ></image>
				<image v-else class="w-full h-full" mode="aspectFill" :src="userInfo.avatar ? userInfo.avatar : '/static/logo.png'" @tap="navigateTo('/pages/login')"></image>
			</view>
			<view class="ml-15">
				<view class="text-bold text-17">
					<text v-if="userInfo.phone">{{userInfo.nickname}}</text>
					<text v-else @tap="navigateTo('/pages/login')">点击登录</text>
				</view>
				<view v-if="userInfo.phone" class="text-13 mt-10" style="color:#666;">手机号：{{userInfo.phone}}</view>
			</view>
		</view>
		<view class="mx-6 border-1 rounded-base bg-white text-14 " style="border-color: #BBB;">
			<view class="flex flex-row align-items-center text-13">
				<view class="p-8 flex-1">订单管理</view>
				<view class="p-8" @tap="navigateTo('/pages/user/order?type=0')">全部></view>
			</view>
			<view class="flex flex-row  text-13 px-8 pt-2 pb-12 ">
				<view class="w-a-5 text-center" @tap="navigateTo('/pages/user/order?type=1')">
					<image class="" style="width: 70rpx; height: 70rpx;" src="/static/order2.png"></image>
					<view class="pt-2" >申请中</view>
				</view>
				<view class="w-a-5 text-center" @tap="navigateTo('/pages/user/order?type=2')">
					<image class="" style="width: 70rpx; height: 70rpx;" src="/static/order3.png"></image>
					<view class="pt-2" >进行中</view>
				</view>
				<view class="w-a-5 text-center" @tap="navigateTo('/pages/user/order?type=3')">
					<image class="" style="width: 70rpx; height: 70rpx;" src="/static/order4.png"></image>
					<view class="pt-2" >审核中</view>
				</view>
				<view class="w-a-5 text-center" @tap="navigateTo('/pages/user/order?type=4')">
					<image class="" style="width: 70rpx; height: 70rpx;" src="/static/order5.png"></image>
					<view class="pt-2" >已完成</view>
				</view>
				<view class="w-a-5 text-center" @tap="navigateTo('/pages/user/order?type=5')">
					<image class="" style="width: 70rpx; height: 70rpx;" src="/static/order6.png"></image>
					<view class="pt-2" >已取消</view>
				</view>
			</view>
		</view>
		<view class="mx-10 border-1 rounded-base bg-white" style="border-color: #BBB; margin-top: 60rpx;">
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/amount')">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-amount.png"></image>
					</view> 
					<view class="flex-1">任务金额</view>
					<view class=""> ></view>
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="toIdcard">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-idcard.png"></image>
					</view> 
					<view class="flex-1 ">实名认证</view>
					<view class="" ><text class="text-13" v-if="userInfo.id_card">已认证</text> ></view> 
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="toEducation">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-education.png"></image>
					</view> 
					<view class="flex-1">技能证书</view>
					<view class=""><text class="text-13" v-if="userInfo.education && (userInfo.utc_certificate_no  || userInfo.caac_certificate_no)">已认证</text> ></view>
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="toShare">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-share.png"></image>
					</view> 
					<view class="flex-1">分享海报</view>
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/servicer')">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-servicer.png"></image>
					</view> 
					<view class="flex-1">联系客服</view>
				</view>
			</view>
			
			<view class=" ">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/note')">
					<view class="mr-5" style="width: 45rpx; height: 45rpx;">
						<image class="w-full h-full" src="/static/user-note.png"></image>
					</view> 
					<view class="flex-1">飞手须知</view>
				</view>
			</view>
		</view>
		
		<view class="text-center pb-5 absolute text-12" style="color: #999;  bottom: 0; left: 50%; transform: translate(-50%,0);"><span class="pr-6">艾飞科技</span><span>技术支持</span></view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	export default {
		data() {
			return {
			
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			
		},
		onShow() {
			request.post('pilot/userInfo').then(res=>{
				this.setUserInfo(res);
			})
		},
		onReachBottom() {
		},
		onShareAppMessage() {
			return {
			  title: '飞兔接单',
			  path: '/pages/task/list',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔接单',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			navigateTo($url){
				uni.navigateTo({
					'url': $url
				})
			},
			
			// 跳转实名
			toIdcard(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/idcard')
				}
			},
			
			// 跳转学历和证书
			toEducation(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/education')
				}
			},
			
			// 跳转分享
			toShare(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/share')
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFF8F5;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
